<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>依琳用户管理</title>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/Yiling/css/Yiling.css">
</head>
<style>

    .Yiling-flexd{position: fixed;bottom: 0;background-color: #f0f4f7;width: 100%;border-top: 1px #c7c7c7 solid;text-align: right;}
    .Yiling-padding{padding: 20px 15px;}
    .Yiling-border-blue{border: 1px solid #0064b6;}
    .Yiling-border-block{border: 1px solid #000;}
    .Yiling-Body{background-color: #ffffff;}
    .Yiling-padding-bottom{padding-bottom: 15px;}
    .Yiling-seach{display: inline-block;height: 36px;border: 1px solid #e5e6e7;vertical-align: top;line-height: 36px;width: 36px;text-align: center;margin-left: -6px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;cursor: pointer;}
    .Yiling-bf8f8{background-color: #f8f8f8;}
    .Yiling-cf8f8{color: #f8f8f8;}
</style>
<body>
    <div class="layui-fluid" >
       <div class="Yiling-white Yiling-top">
           <ul>
                <li class="Yiling-paddingLi " >
                   <span>登录名称:</span> <input type="text" name="title"  lay-verify="required" placeholder="请输入登录名称" autocomplete="off" class="layui-input Yiling-width200">
                </li>
                <li class="Yiling-paddingLi ">
                <span>手机号码:</span> <input type="text" name="title"   lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input Yiling-width200">
                </li>
                <li class="Yiling-paddingLi ">
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius"><i class=" layui-icon layui-icon-search" style="font-size:14px"></i>搜索</button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-radius  layui-btn-warm"><i class=" layui-icon layui-icon-refresh-3" style="font-size:14px"></i>重置</button>
                </li>
           </ul>
       </div>
    </div>
  
    <div class="layui-fluid">
        <div class="Yiling-white Yiling-top">
            <table id="Yiling-table" lay-filter="Yiling-table"></table>
        </div>
    </div>
    <div class="Yiling-flexd">
        <div class="Yiling-padding">
            <button type="button"  lay-submit lay-filter="formDemo"  class="layui-btn layui-btn-sm Yliing-blue Yiling-border-blue">确认</button>
            <button type="button" id="Yiling-close" class="layui-btn layui-btn-sm layui-btn-primary  Yiling-border-block">关闭</button>
        </div>
    </div>
</body>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm Yliing-blue"  lay-event="add"> <i class="layui-icon layui-icon-add-1"></i>新增</button>
    <button class="layui-btn layui-btn-sm Yiling-cyan" lay-event="delete"> <i class="layui-icon layui-icon-edit"></i>修改</button>
    <button class="layui-btn layui-btn-sm Yiling-Red" lay-event="update"><i class="layui-icon layui-icon-close"></i>删除</button>
    <button class="layui-btn layui-btn-sm Yiling-cyanBlue" lay-event=""><i class="layui-icon layui-icon-export"></i>导入</button>
    <button class="layui-btn layui-btn-sm Yiling-yellow" lay-event=""><i class="layui-icon layui-icon-export"></i>导出</button>
  </div> 
</script>

</html>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    
layui.config({
    base:""
}).extend({
    Yiling:"/Yiling/js/Yiling-Request"
}).use(["table","layer","jquery",'form','Yiling'],function(){
    let table = layui.table;
    let layer = layui.layer;
    let $ = layui.jquery;
    let form = layui.form;
    let YI_Ajax = layui.Yiling.YI_Ajax;

    let TID = location.search.substr(1, location.search.length).split('=')[1]
  
    let tableInt = table.render({
        elem:"#Yiling-table",
        height:500,
        skin: 'line',
        size: 'sm', //小尺寸的表格
        title:"系统用户",
        url:"/Admin/AdminSystemApi/systemroleSelectList",
        where:{"Id":TID},
        page:true, //开启分页
        cols: [[ //表头
            {type:"checkbox",width:80,fixed: 'left'}
            ,{field: 'Id', title: 'ID', width:80,fixed: 'left'}
            ,{field: 'loginname', title: '登陆账号', width:140}
            ,{field: 'name', title: '用户名称', width:140}
            ,{field: 'address', title: '地址', width:160} 
            ,{field: 'sex', title: '性别', width: 80,templet:'#SetSex'}
            ,{field: 'creationtime', title: '创建时间', width: 180,templet:"#SetDateCrete"}
            ,{field: 'imgpath', title: '头像', width: 135,templet:"#ImagesID"}
        ]]
    });

    table.on("tool(Yiling-table)",function(obj){   //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        let data = obj.data;   //获取当前数据

        if(obj.event == "del"){

            layer.confirm('是否需要删除！', {
                btn: ['确认', '取消'] //可以无限个按钮
            }, function(index, layero){
                //按钮【按钮一】的回调
                    $.ajax({
                        type:"get",
                        url:"/Admin/AdminSystemApi/sysuserdelete",
                        data:{Id:data.Id},
                        dataType:"json",
                        success:function(result){
                            if(result.ErrorCode == 0){
                                layer.msg(result.ErrorMessage);
                                window.LoadTable();
                            }else{
                                layer.msg(result.ErrorMessage);
                            }
                        }
                    })
                    layer.close(index)
                }, function(index){
                //按钮【按钮二】的回调
                    layer.close(index)
                });
        }
    });


    //监听提交
    form.on('submit(formDemo)', function(data){
      //  console.log(table.checkStatus('ruoling-request-table'))
        let tableId = table.checkStatus('Yiling-table')
        let StrId = "";
        for(let i = 0;i<tableId.data.length;i++){
            StrId += tableId.data[i].Id+",";
        }
        StrId = StrId.substring(0,StrId.length-1)
        layer.confirm('是否确认添加', {icon: 3, title:'提示'}, function(index){
            new YI_Ajax().SetUrl("/Admin/AdminSystemApi/sysroleRoleUserSelectAdd").SetType("GET").SetDataPara({"roleId":TID,"userId":StrId}).Alone().Init(function(err,result){
                if(err){
                    return;
                }
                    parent.window.LoadTable();
                    ifaremClose();
            })
            layer.close(index);
        });
        return false;
    });

    // 关闭按钮事件
    let Yiling_close = document.querySelector("#Yiling-close");
    Yiling_close.addEventListener("click",function(){
    ifaremClose();
    });


    function ifaremClose(){
    //获取特定iframe层的索引
    let index = parent.layer.getFrameIndex(window.name);  
        parent.layer.close(index);
    };



    //调用方法
    window.LoadTable = function (){
        tableInt.reload({
            where:{}
        })
    }

})
</script>

<script type="text/html" id="ImagesID">
    <a href="javascript:;"><img style="width:30px;height:30px" src="{{d.imgpath}}" alt=""></a>
</script>

<script type="text/html" id="SetSex">
    {{SetSexUp(d.sex)}}
</script>


<!-- 时间格式化 -->
<script type="text/html" id="SetDateCrete">
    {{FormDate(d.creationtime,"yyyy年MM月dd日 HH:mm:ss")}}
</script>

<script>

    function SetSexUp(value){
        if(value == 1){
            return "<a style='color:#FF5722'>男</a>";
        }else{
            return "<a style='color:#FFB800'>女</a>"
        }
    }
    function FormDate(d,str){
        return layui.util.toDateString(d, str)
    }

</script>